---
name: useAPI
route: /useAPI
menu: 'SideEffect'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

import Demo4 from './demo/demo4';
import Demo4CodeTsx from '!raw-loader!./demo/demo4.tsx';
import Demo4CodeJsx from '!raw-loader!./demo/demo4.jsx';


# useAPI

A custom hook that helps you sending and receiving data from server, using `umi-request` as default request library.
Supporting manual-trigged fetch and fetch in interval.
> This hook is meant to show a practice of wrapping useAsync. You may not need umi-request in your project. However, you can wrap your own useAPI accoding to [the way useAPI do it](https://github.com/umijs/hooks/blob/master/src/useAPI/index.ts). You can add request headers, transform data structures, or do some common error handling here. if our useAPI works in your project, you can also directly use it for sure.

## Examples

### Default usage

<JackBox tsCode={Demo1CodeTsx} jsCode={Demo1CodeJsx} demoName='Default usage' description='The request will be sent after the component mount'>
  <Demo1 />
</JackBox>

### Sending request manually

<JackBox tsCode={Demo2CodeTsx} jsCode={Demo2CodeJsx} demoName='Sending request manually' description='Sending the request only when the "run" function is called'>
  <Demo2 />
</JackBox>

### Polling

<JackBox tsCode={Demo3CodeTsx} jsCode={Demo3CodeJsx} demoName='Polling' description='The request will be sent every 3 seconds, the timer will start running only if the last request has been received'>
  <Demo3 />
</JackBox>

### Modifying the request method

<JackBox tsCode={Demo4CodeTsx} jsCode={Demo4CodeJsx} demoName='Modifying the request method' description='Using your custom request method'>
  <Demo4 />
</JackBox>

## API

See [useAsync](./useAsync)